<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="添加图片" prop="photo">
                <Uploads :row="ruleForm.photo" @OK="OKdata2" @removeImg="removeImg2"></Uploads>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <Wangeditor @closeOK="closeOKDataCommodityDetails" :row="ruleForm.content">
                </Wangeditor>
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model="ruleForm.author" />
            </el-form-item>
            <el-form-item label="分类" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择">
                    <el-option label="景区攻略" value="景区攻略" />
                    <el-option label="住宿攻略" value="住宿攻略" />
                    <el-option label="线路攻略" value="线路攻略" />
                    <el-option label="美食攻略" value="美食攻略" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import Wangeditor from '@/components/wangeditor/index.vue'
import { onMounted, reactive, ref } from 'vue'
import { newsManagementMenuAdd, newsManagementUpdate } from '@/api/permission.js'
import { ElMessage } from 'element-plus'
import Uploads from '@/components/elUploads/index.vue'
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    type: '',
    photo: [],
    title: '',
    content: '',
    author: '',
})

const rules = reactive(
    {
        photo: [
            { required: true, message: '请选择', trigger: 'change' },
        ],
        type: [
            { required: true, message: '请选择', trigger: 'change' },
        ],
        title: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        content: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        author: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
    })




onMounted(() => {
    if (!props.isAdd) {
        ruleForm.type = props.row.type; // 初始化表单字段值
        ruleForm.photo = props.row.photo.split(','); // 初始化表单字段值
        ruleForm.title = props.row.title; // 初始化表单字段值
        ruleForm.content = props.row.content; // 初始化表单字段值
        ruleForm.author = props.row.author; // 初始化表单字段值
    }
})
// 商品描述-商品详情
const closeOKDataCommodityDetails = (data) => {
    ruleForm.content = data
}

// 图片上传
const OKdata2 = (url) => {
    ruleForm.photo.push(...url)
}
// 图片-删除
const removeImg2 = (item) => {
    ruleForm.photo = item

}

// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                newsManagementMenuAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                newsManagementUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped></style>